<template>
  <div class="depa-list-page">
	  <!-- 公共组件-每个页面必须引入 -->
	  <public-module></public-module>
	  <div class="list-con-div">
		  <div class="list-item" @tap="select(item)" v-for="item in list" :key="item.roleId">
			  <div class="item-text">{{item.roleName}}</div>
			  <div class="item-icon" @tap.stop="edit(item)">
				  <view class="icon u-flex">
				    <f-icon name="edit" size="40" color="#FF5E01"></f-icon>
				  </view>
			  </div>
		  </div>
	  </div>
	  
	   <view class="page-bottom-btn" :style="{paddingBottom:systemInfo.tabbarPaddingB+'px',paddingLeft:'20rpx',paddingRight:'20rpx'}">
			<u-button text="新增角色权限" type="primary" shape="circle" @click="add()"></u-button>
	   </view>
	   
	   <!--编辑新增-->
	   <u-popup :show="show" mode="bottom" :round="10" @close="closeShow" >
	       <div class="popupTitle">{{title}}</div>
				<div class="popup-con">
					<u--form labelPosition="left" :model="form" :rules="rules" ref="form" labelWidth="100" errorType="toast">
						<u-form-item required label="角色名称" prop="roleName" borderBottom >
							<u--input  fontSize="14" inputAlign="right" v-model="form.roleName" border="none"  placeholder="请输入角色名称"></u--input>
						</u-form-item>
						<u-form-item required label="请选择权限" prop="permissions" labelPosition="top">
							<div style="padding-top:24rpx;">
								<u-checkbox-group v-model="form.permissions"  :borderBottom="true" placement="column" iconPlacement="right" >
									<u-checkbox :customStyle="{marginBottom: '16px'}" labelSize="14" v-for="(item, index) in checkboxList" :key="index" :label="item.name" :name="item.id" >
									</u-checkbox>
								</u-checkbox-group>
							</div>
							
						</u-form-item>
					</u--form>
					
				</div>
				<div class="u-flex popup-bottom">
					<u-button text="删除"  shape="circle" @click="delItem" v-if="type == 'edit'"></u-button>
					<u-button text="确认"  shape="circle" type="primary" @click="saveForm" :loading="btnLoading"></u-button>
				</div>
	   </u-popup>
	   
	 
	 
	 
  </div>
  
</template>

<script>
  import {editRole,getRole,getPermissions,delRole} from '@/config/api.js'
  import store from '@/store';
    import base from '@/config/baseUrl.js';
  const defaultForm={
  	     roleName:'',
  		 roleId:'',
  		 permissions:[],
      };
  export default {
      data() {
          return {
  			show:false,
			isSelect:false,
			form:JSON.parse(JSON.stringify(defaultForm)),
			type:'',
			title:'',
			list:[],
			checkboxList: [],
			rules: {
				roleName: [{
						required: true,
						message: '请输入角色名称',
						// 可以单个或者同时写两个触发验证方式
						trigger: ['blur', 'change']
					}],
			permissions: [{
					required: true,
					message: '请选择权限',
					// 可以单个或者同时写两个触发验证方式
					trigger: ['change'],
					type:'array'
				}],
			},
			systemInfo: base.systemInfo,
          }
      },
     onLoad(options) {
     	if (options.type == 'select') {
     	  this.isSelect = true;
     	}
		this.getList()
		getPermissions().then((res)=>{
			this.checkboxList = res;
		})
      },
	  
	  
      methods: {
		  getList(){
			  getRole().then((res)=>{
				  this.list = res;
			  })
		  },
		  select(row) {
		    //是否需要返回地址(从订单确认页跳过来选收货地址)
		    if (!this.isSelect) {
		      return;
		    }
		    uni.setStorage({
		      key: 'selectRole',
		      data: row,
		      success() {
		        uni.navigateBack();
		      }
		    })
		  },
		  
		  edit(item){
			  this.show=true;
			  this.type = 'edit';
			  this.title = '编辑角色';
			  this.form.roleName = item.roleName;
			  this.form.roleId = item.roleId;
			  this.form.permissions = item.permissions;
			  console.log(this.form)
		  },
		  add(){
			this.show=true;
			this.type = 'add';
			this.title = '新增角色';
			this.form = JSON.parse(JSON.stringify(defaultForm));
		  },
		  
		  saveForm(){
			   this.$refs.form.validate().then(res => {
				   this.btnLoading = true;
				   let  data = JSON.parse(JSON.stringify(this.form));
					 editRole(data).then(()=>{
						    this.btnLoading = false;
							this.closeShow();
							this.getList()
					 }).catch(()=>{
						   this.btnLoading = false;
					 })
			   }).catch(errors => {
				
			   })
		  },
		  closeShow(){
			   this.show = false
		  },
		  
		  delItem() {

		    uni.showModal({
		      title: '删除提示',
		      content: '您将删除这个角色',
		      success: (res) => {
		        if (res.confirm) {
		          delRole({
		            roleId: this.form.roleId
		          }).then(() => {
		           this.closeShow();
		           this.getList()
		          })
		  
		        } else if (res.cancel) {
		          console.log('用户点击取消');
		        }
		      }
		    });
		  
		  },
  		 
		 
		
		
             
          
      }
  
  }
  
</script>

<style lang="scss">
   @import '@/style/common.scss';
   .depa-list-page{
	   padding-bottom:160rpx;
	   .list-con-div{
		    padding:0 24rpx;
			background: #fff;
		   .list-item{
			  padding:24rpx 0;
			  font-size:$m-font;
			  border-bottom:1px solid #d6d7d9;
			  @include flexbox(space-between,center);
			  .item-icon{
				  border-left:1px solid #d6d7d9;
				  padding-left:20rpx;
			  }
		   }
		   .list-item:last-child{
			    border-bottom:0px solid #d6d7d9;
		   }
	   }
   }
	.popupTitle{
		font-size:$b-font;
		font-weight: bold;
		text-align: center;
		line-height: 50px;
	}
	   .popup-con{
	    	padding:0 16px 16px 16px;
	    	.popup-block-pay{
	    		text-align: center;
	    		padding:20px;
	    		.price-sub-title{
	    			font-size:$s-font;
	    			color:$g-font-color;
	    			line-height: 30px;
	    		}
	    		.price-big-title{
	    			font-size: 22px;
	    			color:$theme-color;
	    			font-weight:bold;
	    			margin-top:10px;
	    		}
	    	}
	    	.popup-label{
	    		line-height: 40px;
	    		font-size:$m-font;
	    		color:$g-font-color;
	    		@include flexbox(space-between,center)
	    	}
	    	.img-div{
	    		width:210px;
	    		height:210px;
	    		border:1px solid $border-color;
	    		margin:0 auto;
	    		background: #f4f5f7;
	    	}
	        .send-list{
	    		padding-top:$marginSpace;
	    		.send-item{
	    			border-radius: 8px;
	    			padding:12px;
	    			box-shadow: 0 0 5px rgba(0,0,0,0.1);
	    			margin-bottom:$marginSpace;
	    			.send-top{
	    				@include flexbox(flex-start,flex-start);
	    				font-size:$m-font;
	    				.name{
	    					padding-right:12px;
	    					flex:1
	    				}
	    				.num{
	    					font-weight: bold;
	    					color:$theme-color
	    				}
	    			}
	    			.send-middle{
	    				font-size:$s-font;
	    				color:$g-font-color;
	    				line-height: 18px;
	    				margin-top:5px;
	    			}
	    			.send-bottom{
	    				text-align: right;
	    				font-size:$s-font;
	    				margin-top:16px
	    			}
	    		}
	    	}
	    	.category-list{
	    		padding:36rpx 0;
	    		.list-item{
	    			@include flexbox(flex-start,flex-start);
	    			margin-bottom:20rpx;
	    			.item-title{
	    				width: 126rpx;
	    				height: 52rpx;
	    				background: rgba(255,255,255,0.39);
	    				border: 1px solid #B8B8B8;
	    				border-radius: 9rpx;
	    				font-size:$m-font;
	    				text-align: center;
	    				line-height: 52rpx;
	    			}
	    			.item-list{
	    				padding-left:30rpx;
	    				width:calc(100% - 126rpx);
	    				overflow: hidden;
	    				.item-ename{
	    					font-size:$s-font;
	    					color: #929292;
	    					line-height: 52rpx;
	    					width: 170rpx;
	    					@include textoverflow(1);
	    					float:left;
	    				}
	    			}
	    		}
	    	}
	    	.goodsSn-list{
	    		border: 1px solid #DEDEDE;
	    		padding:0 10px;
	    		font-size:$s-font;
	    		margin-top:15px;
	    		padding-bottom:10px;
	    		.list-cell{
	    			border-bottom:1px solid #DEDEDE;
	    			@include flexbox(space-between,center);
	    			line-height: 60rpx;
	    			height:60rpx;
	    		}
	    		.list-cell:first-child{
	    			
	    		}
	    	}
	    	.audio-text{
	    		font-size: 34rpx;
	    		line-height: 48rpx;
	    		color: #414141;
	    		text-align: center;
	    		padding-top:100rpx;
	    	}
	    	.audio-dh{
	    		@include flexbox(space-between,center);
	    	}
	    
	    }
	    .popup-bottom{
	    	background: #fff;
	    	margin-top:10px;
	    	padding:16px;
	    }
	    .popup-bottom-fixed{
	    	position: fixed;
	    	width:100%;
	    	padding:16px;
	    	box-sizing: border-box;
	    	bottom:0
	    }
	    
	    
</style>